<template>
  <div>
    <Breadcrumb>
      <BreadcrumbItem>卡券管理</BreadcrumbItem>
      <BreadcrumbItem>卡券列表</BreadcrumbItem>
    </Breadcrumb>
    <Form ref="formInline" :model="request" inline>
      <FormItem>
        用户名称:
        <Input
          v-model="selectForm.nickname"
          type="text"
          clearable
          placeholder="请输入用户名称"
          style="width: 120px"/>
      </FormItem>
      <FormItem>
        卡券名称:
        <Input v-model="selectForm.coupon_name"
               type="text"
               clearable
               placeholder="请输入卡券名称"
               style="width: 120px"/>
      </FormItem>
      <FormItem>
        卡券金额:
        <Input v-model="selectForm.money"
               type="text"
               clearable
               placeholder="请输入卡券金额"
               style="width: 120px"/>
      </FormItem>
      <br>
      <FormItem>
        发券时间:
        <DatePicker type="daterange"
                    @on-change="timechange"
                    :transfer="true"
                    placement="bottom-end"
                    placeholder="请选择开始-结束时间"
                    style="width: 200px"
        ></DatePicker>
      </FormItem>
      <FormItem>
        卡券类型:
        <Select clearable
                v-model="selectForm.coupon_category_id"
                style="width: 120px;">
          <Option v-for="item in couponTypeList"
                  :value="item.coupon_category_id"
                  :key="item.ROW_NUMBER">{{ item.name }}
          </Option>
          <!--        <Option value="0">衣服类</Option>-->
        </Select>
      </FormItem>
      <FormItem>
        是否领取:
        <Select v-model="selectForm.is_get"
                clearable
                style="width: 120px;">
          <Option value="1">未领取</Option>
          <Option value="2">已领取</Option>
        </Select>
      </FormItem>
      <FormItem>
        <Button @click="selectCoupon" type="success" style="margin-right: 10px">搜索</Button>
        <Button type="success" @click="$router.push('/card/addCard')" style="margin-right: 10px">新增卡券</Button>
      </FormItem>
      <br>
    </Form>
    <div>
      <Table :columns="columns1" :data="data">
        <template slot-scope="{row}" slot="isGet">
          <span>{{ checkIsGet(row) }}</span>
        </template>
        <template slot-scope="{ row }" slot="option">
          <Button
            type="error"
            size="small"
            style="margin-right: 5px"
            @click="goDel(row)">删除
          </Button>
        </template>
      </Table>
    </div>
    <!--    分页功能-->
    <div style="display: flex; justify-content: center;">
      <Page style="display: flex;justify-content: center;margin-top: 24px;"
            :total="page.count"
            :page-size="10"
            :page-size-opts="[10,20,30,40,50,100]"
            show-elevator
            show-sizer
            show-total
            @on-change="handleCurrentChange"
            @on-page-size-change="handleSizeChange"/>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      formItem: {
        checkbox: []
      },
      params: {
        device_time: [],
        status: 1,
        user_id: '',
        order_id: '',
        activity_id: '',
        page: 1,
        limit: 10
      },
      total: 0,
      page: {
        count: 0,
        page: 1,
        limit: 10
      }, // 分页器
      height: this.$store.state.height,
      modal1: false,
      modal3: false,
      data1: [
        {
          id: 1,
          title: '机器组3'
        },
        {
          id: 2,
          title: '机器组4'
        }
      ],
      request: {
        device_number: '',
        page: 1
      },
      columns1: [
        {
          title: '卡券名称',
          key: 'coupon_name',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '卡券类型',
          key: 'coupon_category_name',
          minWidth: 300,
          align: 'center'
        },
        {
          title: '用户名称',
          key: 'nickname',
          minWidth: 150,
          align: 'center'
        },

        {
          title: '卡券金额',
          key: 'money',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '是否领取',
          minWidth: 150,
          align: 'center',
          slot: 'isGet'
        },
        {
          title: '发券时间',
          key: 'create_time',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '操作',
          slot: 'option',
          width: 200,
          align: 'center',
          fixed: 'right'
        }
      ],
      data: [
        {
          card_name: '满10减2',
          card_types: '001',
          receive: '是'

        },
        {
          card_name: '满100减20',
          card_types: '003',
          receive: '否'
        }
      ],
      role_id: null,
      couponTypeList: [], // 卡券类型列表
      selectCouponType: '1',
      selectForm: {
        nickname: undefined,
        coupon_name: undefined,
        coupon_category_id: undefined,
        is_get: undefined,
        time: undefined,
        money: undefined,
        page: undefined,
        limit: undefined
      }
    }
  },
  mounted () {
    this.init()
    this.addcoupon({})
    this.couponType()
  },
  methods: {
    /**
     * 判断卡券是否已经领取
     * @param row
     * @returns {string}
     */
    checkIsGet (row) {
      return row.is_get === '1' ? '未领取' : '已领取'
    },
    /**
     * 检索卡券
     */
    selectCoupon () {
      this.addcoupon(this.selectForm)
    },
    /**
     * 改变每页条数
     * @param val
     */
    handleSizeChange (val) {
      this.page.page = 1
      this.page.limit = val
      this.addcoupon(this.selectForm)
    },
    /**
     * 翻页
     * @param val
     */
    handleCurrentChange (val) {
      this.page.page = val
      this.addcoupon(this.selectForm)
    },
    // ------------------ axios ---------------------------
    /**
     * 删除卡券
     * @param info
     */
    goDel (info) {
      this.axios.post('coupon/couponDel', { id: info.id })
        .then(res => {
          this.$Message.success(res.msg)
          this.addcoupon({})
        })
    },
    /**
     * 卡券详情
     */
    addcoupon (pd) {
      pd.page = this.page.page
      pd.limit = this.page.limit
      this.axios.post('coupon/couponList', pd)
        .then(res => {
          this.data = res.data.list
          this.page.count = res.data.count
        })
    },
    /**
     * 获取卡券类型列表
     */
    couponType () {
      this.axios.post('coupon/couponType')
        .then(res => {
          this.couponTypeList = res.data
        })
    },
    /**
     * 添加文章内容按钮
     */
    addArticle () {
      this.cancel()
      this.modal3 = true
      this.allocated = []
      this.undistributed = []
      if (this.infoID === 6) {
        this.axios.post('device/getAllDev').then(res => {
          if (res.code === 1) {
            this.allocated = res.data.allocated
            this.undistributed = res.data.undistributed
          }
        })
      }
    },
    add3 () {
      this.cancel()
      this.modal3 = true
      this.allocated = []
      this.undistributed = []
      if (this.infoID === 6) {
        this.axios.post('device/getAllDev').then(res => {
          if (res.code === 1) {
            this.allocated = res.data.allocated
            this.undistributed = res.data.undistributed
          }
        })
      }
    },
    init () {
      this.axios.post('order/order_list', this.params).then((res) => {
        if (res.code === 1) {
          this.total = res.data.count
          this.tableData = res.data.list
        }
      })
    },
    search () {
      this.params.page = 1
      this.init()
    },
    confirm () {
      this.modal1 = false
      this.$Message.success('保存成功！')
      this.cancel()
    },
    cancel () {
    },
    // add() {
    //   this.modal1 = true;
    // },
    setStatus (id, status) {
      var text = '确定要' + (status === 1 ? '启用' : '禁用') + '此机器组么？'
      this.$Modal.confirm({
        title: text,
        onOk: () => {
          this.$Message.success('操作成功')
        },
        onCancel: () => {
        }
      })
    },
    lists () {
    },
    /**
     * 时间选择器
     * @param val
     */
    timechange (val) {
      this.selectForm.time = val
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

.door_device {
  position: relative;
  top: -20px;
}

.vertical {
  font-size: 16px;

}
</style>
